<template>
    <div class="inputadd">
        <div class="top">
      <van-icon name="arrow-left" size="30" class="da" @click="onClick"/>
      <span>新增页面</span>
    </div>
    <div class="input">
    <input type="text" placeholder="输入任务名称" v-model="inputText" />
    <span @click="add">新增</span>
    </div>


    </div>
  
</template>

<script setup>
import {ref} from "vue"
import { useTasklistStore } from "../stores/tasklist";
import { useRouter } from "vue-router";
var $router=useRouter();
var inputText=ref("");
var store=useTasklistStore();
var onClick=()=>{
    $router.push('./index')
}
var add=()=>{
    store.addTask(inputText.value)
    inputText.value=''
    $router.push('/index')
}


</script>

<style scoped>
.top{
  height: 40px;
  text-align: center;
  margin: 10px;
}
.top .da{
  float: left;
}
.top span{
  font-weight: 700;
  font-size: 22px;
}
.input{
    margin: 10px;
}
.input input{
    width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  outline: none;
  padding-left: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 10px;

}
.input span{
    display: block;
    text-align: center;
  line-height: 40px;
  border-radius: 5px;
  color: chartreuse;
  border: 1px solid chartreuse;
  width: 100%;

}

</style>